<template>
    <el-card class="index">
        <div slot="header" class="clearfix">
        <span>手动取现配置</span>
        <span><el-switch  style="display: block"   v-model="form.value"  active-color="#13ce66" inactive-color="#D9D9D9" :inactive-value="false" :active-value="true" active-text="开"  inactive-text="关" /></span>
      </div>
      <div class="form" v-if="form.value">
        <el-form :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="180px" >
            <el-form-item label="取现类型" prop="cash_type" style="width: 100%;">
              <el-checkbox-group v-model="form.cash_type" @change="cashTypeChange">
                <el-checkbox label="T1">T1</el-checkbox>
                <el-checkbox label="DM">DM</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-row v-if="form.T1Form.switch_state">
             <el-col :span="12">
               <el-form-item label="T1取现手续费(元)" prop="T1Form.fix_amt" >
                <div class="t1-cash">
                    <el-input type="number" style="width: 275px;" @blur="t1FormfixAmtBlur" v-model="form.T1Form.fix_amt" placeholder="请输入T1取现手续费(元)" clearable  />
                   <el-checkbox style="margin-left: 20px;" true-label="Y" false-label="N" v-model="form.T1Form.is_priority_receipt" >是否优先取现</el-checkbox>
                </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="T1取现费率(%)" prop="T1Form.fee_rate">
                   <el-input type="number" style="width: 275px;" @blur="t1FormfeeRatetBlur" v-model="form.T1Form.fee_rate" placeholder="请输入T1取现费率(%)" clearable  />
               </el-form-item>
             </el-col>
          </el-row>
          <el-row >
             <el-col :span="12" v-if="form.T1Form.switch_state">
               <el-form-item label="T1取现手续费外扣标记" prop="T1Form.out_fee_flag" >
                <el-select style="width: 275px;" v-model="form.T1Form.out_fee_flag" clearable placeholder="请选择手续费外扣标记">
                   <el-option label="内扣" value="2" />
                   <el-option label="外扣" value="1" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="form.T1Form.out_fee_flag == '1' && form.T1Form.switch_state">
              <el-form-item label="T1取现手续费外扣ID" prop="T1Form.out_fee_huifu_id">
                   <el-input maxlength="16" style="width: 275px;" v-model="form.T1Form.out_fee_huifu_id" placeholder="请输入DM取现手续费外扣汇付ID" clearable  />
               </el-form-item>
             </el-col>
          </el-row>
          <el-row v-if="form.DMForm.switch_state">
             <el-col :span="12">
               <el-form-item label="DM取现手续费(元)" prop="DMForm.fix_amt" >
                <div class="t1-cash">
                    <el-input type="number" style="width: 275px;" @blur="dmFormfixAmtBlur  " v-model="form.DMForm.fix_amt" placeholder="请输入DM取现手续费(元)" clearable  />
                   <!-- <el-checkbox style="margin-left: 20px;" v-model="form.radio" >是否优先取现</el-checkbox> -->
                </div>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="DM取现费率(%)" prop="DMForm.fee_rate">
                   <el-input type="number" style="width: 275px;" @blur="dmFormfeeRateBlur" v-model="form.DMForm.fee_rate" placeholder="请输入DM取现费率(%)" clearable  />
               </el-form-item>
             </el-col>
          </el-row>
          <el-row >
             <el-col :span="12" v-if="form.DMForm.switch_state">
               <el-form-item label="DM取现手续费外扣标记" prop="DMForm.out_fee_flag" >
                <el-select style="width: 275px;" v-model="form.DMForm.out_fee_flag" clearable placeholder="请选择手续费外扣标记">
                   <el-option label="内扣" value="2" />
                   <el-option label="外扣" value="1" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="form.DMForm.out_fee_flag == '1' && form.DMForm.switch_state">
              <el-form-item label="DM取现手续费外扣ID" prop="DMForm.out_fee_huifu_id">
                   <el-input maxlength="16" style="width: 275px;" v-model.trim="form.DMForm.out_fee_huifu_id" placeholder="请输入DM取现手续费外扣汇付ID" clearable  />
               </el-form-item>
             </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
</template>

<script>
export default{
    name:'cashOutConfig',
    props:{
      qry_cash_config_list:[Array]
        // regionList:
    },
    watch:{
      form:{
        handler(nValue , oValue){
          if(this.form.value){
            // nValue.DMForm.out_cash_flag = nValue.DMForm.out_fee_flag
            // nValue.T1Form.out_cash_flag = nValue.T1Form.out_fee_flag
            this.$emit('cashOutConfigChange' ,nValue)
          }else{
            const value = JSON.parse(JSON.stringify(nValue)) 
            if(this.qry_cash_config_list.length){
              value.T1Form.switch_state = 0
              value.DMForm.switch_state = 0
              this.$emit('cashOutConfigChange' ,value)
            }else{
              this.$emit('cashOutConfigChange' ,{})
            }
          }
          },
            deep:true
      },
      qry_cash_config_list:{
        handler(nValue , oValue){
          if(nValue.length){
            if(nValue[0].switch_state == 1 || nValue[1].switch_state == 1){
            let arrType =  []
            this.form.cash_type = []
          nValue.forEach(item=>{
             if(item.cash_type == 'T1' && item.switch_state == '1'){
              this.form.cash_type.push('T1')
               this.form.T1Form = JSON.parse(JSON.stringify(item))
               this.form.T1Form.out_fee_flag = item.out_cash_flag 
             }else if(item.cash_type == 'DM' && item.switch_state == '1'){
              this.form.cash_type.push('DM')
              this.form.DMForm = JSON.parse(JSON.stringify(item))
              this.form.DMForm.out_fee_flag = item.out_cash_flag 
             }
             arrType.push(item.cash_type)
          })
            this.form.value = true
            // console.log(11111)
            // this.cashTypeChange(arrType)
          }else{
            this.form.value = false
          }
          }
          
          
        },
        deep:true
      },
    },
    data(){
        return{
            form:{
              value:false,
              T1Form:{
                cash_type:''
              },
              DMForm:{
                cash_type:''
              },
              // checkList:[],
              cash_type:[]
            },
            formRules:{
              'cash_type':[{ required: true, message: '请选择取现类型', trigger: 'change' }],
              'T1Form.fix_amt':[{ required: true, message: '请输入取现手续费', trigger: 'change' }],
              'DMForm.fix_amt':[{ required: true, message: '请输入取现手续费', trigger: 'change' }],
              'T1Form.fee_rate':[{ required: true, message: '请输入取现费率', trigger: 'change' }],
              'DMForm.fee_rate':[{ required: true, message: '请输入取现费率', trigger: 'change' }],
              'T1Form.out_fee_flag':[{ required: true, message: '请选择取现手续费外扣标记', trigger: 'change' }],
              'DMForm.out_fee_flag':[{ required: true, message: '请选择取现手续费外扣标记', trigger: 'change' }],
              'T1Form.out_fee_huifu_id':[{ required: true, message: '请输入取现手续费外扣汇付ID', trigger: 'change' }],
              'DMForm.out_fee_huifu_id':[{ required: true, message: '请输入取现手续费外扣汇付ID', trigger: 'change' }],
            },
        }
    },
    methods:{
      cashTypeChange(v){
        const T1Data = v.find(item=> item == 'T1' )
        // console.log(T1Data)
        if(T1Data){
          this.form.T1Form.cash_type = 'T1'
          this.form.T1Form.switch_state = 1
        }else{
          this.form.T1Form.switch_state = 0
        }
        const DMData = v.find(item=> item == 'DM' )
        // console.log(DMData)
        if(DMData){
          this.form.DMForm.switch_state = 1
          this.form.DMForm.cash_type = 'DM'
        }else{
          this.form.DMForm.switch_state = 0
        }
        setTimeout(()=>{
          this.form.cash_type = v
          this.$forceUpdate()
        })
      },
      dmFormfixAmtBlur(val){
        if(this.form.DMForm.fix_amt){
          this.form.DMForm.fix_amt = (this.form.DMForm.fix_amt * 1).toFixed(2)
          this.$forceUpdate()
        }
      },
      dmFormfeeRateBlur(val){
        if(this.form.DMForm.fee_rate){
          this.form.DMForm.fee_rate = (this.form.DMForm.fee_rate * 1).toFixed(2)
          this.$forceUpdate()
        }
        
      },
      t1FormfixAmtBlur(val){
        if(this.form.T1Form.fix_amt){
          this.form.T1Form.fix_amt = (this.form.T1Form.fix_amt * 1).toFixed(2)
        this.$forceUpdate()

        }
      },
      t1FormfeeRatetBlur(val){
        if(this.form.T1Form.fee_rate){
           this.form.T1Form.fee_rate = (this.form.T1Form.fee_rate * 1).toFixed(2)
           this.$forceUpdate()
        }
      }
    }
}
</script>

<style scoped>
.index{
    width: 100%;
    margin-bottom: 30px;
   }
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
    .t1-cash{
     display: flex;
     align-items: center;
   }
</style>